<template>
<el-row>
    <add-or-update v-if="addOrUpdateDictVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
<el-col :span="8">
    <div class="grid-content bg-purple">
        <el-col>
            <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
            <el-form-item>
                <el-input v-model="dataForm.key" placeholder="字典名称" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="getDataList()">查询</el-button>
                <el-button  type="primary" @click="addOrUpdateDictHandle()">新增</el-button>
            </el-form-item>
            </el-form>
        </el-col>
        <el-col v-for="(item,index) in dictDataList" :key="index" class="dict-item">
            <span @click="handClick(index,item)">
                {{item.description}} 
            </span>
        </el-col>
    </div>
    </el-col>
<el-col :span="16">
    <div class="grid-content bg-purple-light">
        <dictDetail ref="dictDetail"></dictDetail>
    </div>
</el-col>
</el-row>
</template>

<script>
import dictDetail from './dict-detail'
import addOrUpdate from './add-or-update-dict'
export default {
    data(){
        return{
            dataForm: {
                key: ''
            },
            dictDataList:[],
            addOrUpdateDictVisible: false,
        }
    },
    components: {
    dictDetail,
    addOrUpdate
    },
    activated () {
    this.getDataList()
    },
    methods:{
        //获取左侧列表菜单
        getDataList(){
            this.dataListLoading = true
        this.$http({
        url: this.$http.adornUrl('upms/sysdict/list'),
        method: 'get',
        params: this.$http.adornParams({
            'key': this.dataForm.key
        })
        }).then(({data}) => {
        if (data && data.code === 1) {
            this.dictDataList = data.data
        } else {
            this.dictDataList = []
        }
        this.dataListLoading = false
        })    
        },
        //点击左侧
    handClick(index,item){
        this.$refs.dictDetail.getDataList(item.dictId);
    },
    //调用保存
    addOrUpdateDictHandle(){
        this.addOrUpdateDictVisible = true
        console.log("调用了保存",this.addOrUpdateDictVisible);
        this.$nextTick(() => {
            this.$refs.addOrUpdate.init()
        })
    }
    }
}
</script>

<style>
.dict-item {
        font-size: 14px;
        margin: 0 0 10px 5%;
        text-align: left;
    }
</style>